<template>
	<view class="card_item">
		<view class="item_header">
			<text class="itemHeader_title">单号：{{ cardItem.id }}</text>
		</view>
		<view class="item_center">
			<view class="cardCenter" v-for="(i,index) in centers" :key="index">
				<text class="cardCenter_name">{{i.centerName}}：</text>
				<text class="cardCenter_content">{{cardItem[i.centerContent]}}</text>
			</view>
		</view>
		<view class="item_bottom">
			<view class="cardBottom_left">
				<text>维修人：{{ cardItem.repairName }} {{ cardItem.repairTime | date('yyyy-mm-dd hh:MM:ss') }}</text>
			</view>
			<view class="cardBottom_right" v-if="showRightButton">
				<u-tag text="待审核" :show="cardItem.status == 1" type="success" />
				<u-tag text="已完成" :show="cardItem.status == 2" type="info" />
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		cardItem: {
			type: Object,
			default: {}
		},
		centers:{
			type: Array,
			default: []
		},
		showRightButton:{
			type:Boolean,
			default:false
		}
			
	},
	data() {
		return {

		};
	}
};
</script>

<style lang="scss" scoped >
.card_item {
	background-color: #fff;
	margin:30rpx;
	border-radius: 10rpx;
	.item_header {
		height: 80rpx;
		padding: 0 30rpx;
		border-bottom: 1px solid #e9e9e9;
		.itemHeader_title {
			font-size: 30rpx;
			font-weight: bold;
			line-height: 80rpx;
		}
	}
	.item_center {
		padding: 30rpx;
		border-bottom: 1px solid #e9e9e9;
		.cardCenter {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 26rpx;
			.cardCenter_name {
				color: #7f7f7f;
			}
			.cardCenter_content{
				
			}
		}
	}

	.item_bottom {
		padding: 10rpx 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.cardBottom_left{
			flex:1;
			line-height: 60rpx;
			font-size: 26rpx;
			color: #7f7f7f;
		}
		.cardBottom_right{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 70rpx;
			width: 120rpx;
		}
		
	}
}
</style>

